<script setup>

   import {ref,reactive} from 'vue'

   /**
    * 双向绑定: 针对表单标签,用于收集表单数据!进行表达数据回显!
    * 
    * 编写一个登录页面! 
    *     登录按钮 -> 弹出一个框,显示输入的账号和密码
    *     重置按钮 -> 点击 -> 输入账号和密码置空 
    */

    //用于接收输入表单的数据
    //user == 表单绑定 双向绑定
    let user = ref({
        account:'',
        password:''
    });
  
   //查看表单是否在输入的时候,把数据传递给绑定的对象
    let login=()=>{
        alert(JSON.stringify(user.value));
    }

    //修改绑定的数据,间接影响页面展示表达
    let reset=()=>{
        user.value = {
          account:'',
         password:''
       }
    }

    
</script>

<template>
    <div>
        账号: <input type="text" v-model="user.account" placeholder="请输入账号!"> <br>
        密码: <input type="text" v-model="user.password" placeholder="请输入密码!"> <br>
        <button @click="login()">登录</button>
        <button @click="reset()">重置</button>
        
    </div>
</template>

<style scoped>
</style>
